<template>
  <div class="upload-container animate__animated animate__fadeIn">
    <div class="background-shapes">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
    </div>
    <el-container>
      <el-header>
        <h2 class="title animate__animated animate__fadeInDown">文件上传</h2>
      </el-header>
      <el-main>
        <el-card class="button-container">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('team')" class="custom-button animate__animated animate__fadeInLeft animate__delay-1s">上传团队 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('teamMember')" class="custom-button animate__animated animate__fadeInLeft animate__delay-1s">上传团队成员 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('aProblem')" class="custom-button animate__animated animate__fadeInLeft animate__delay-1s">上传 A 类题目 Excel</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('problemSelection')" class="custom-button animate__animated animate__fadeInRight animate__delay-1s">上传团队选题 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('instructor')" class="custom-button animate__animated animate__fadeInRight animate__delay-1s">上传指导老师 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('judge')" class="custom-button animate__animated animate__fadeInRight animate__delay-1s">上传裁判 Excel</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('aScore')" class="custom-button animate__animated animate__fadeInRight animate__delay-1s">上传 A 类评分 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="uploadFile('bScore')" class="custom-button animate__animated animate__fadeInRight animate__delay-1s">上传 B 类评分 Excel</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" @click="deleteAllData" class="delete-button animate__animated animate__fadeInUp animate__delay-2s">删除所有数据</el-button>
            </el-col>
          </el-row>
        </el-card>
        <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import service from '@/utils/request';
import { ElNotification, ElLoading } from 'element-plus';
import 'animate.css';

const fileInput = ref(null);
const currentTable = ref('');
let loadingInstance;

const uploadFile = (table) => {
  currentTable.value = table;
  fileInput.value.click();
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);

    loadingInstance = ElLoading.service({
      fullscreen: true,
      text: '正在上传文件...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    service.post(`/upload/${currentTable.value}`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log(`${currentTable.value} 上传成功`, response);
      ElNotification({
        title: currentTable.value + '表上传成功！',
        message: response,
        type: 'success',
      });
    })
    .catch(error => {
      ElNotification({
        title: '上传失败',
        message: error.message,
        type: 'error',
      });
      console.error(`${currentTable.value} 上传失败`, error);
    })
    .finally(() => {
      loadingInstance.close();
    });
  }
};

const deleteAllData = () => {
  service.delete('/upload/clear')
    .then(response => {
      ElNotification({
        title: '所有表的数据已成功删除',
        type: 'success',
      });
      console.log('所有表的数据已成功删除', response);
    })
    .catch(error => {
      ElNotification({
        title: '删除失败',
        message: '请联系管理员',
        type: 'error',
      });
      console.error('删除所有数据失败', error);
    });
};
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

.background-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(26, 115, 232, 0.1), rgba(66, 133, 244, 0.1));
  border-radius: 50%;
  animation: float 15s infinite ease-in-out;
}

.shape1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
}

.shape2 {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -100px;
  animation-delay: 2s;
}

.shape3 {
  width: 250px;
  height: 250px;
  bottom: -125px;
  left: 50%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

.title {
  color: #1a73e8;
  text-align: center;
  font-size: 2.5em;
  margin: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.button-container {
  margin: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  backdrop-filter: blur(10px);
}

.custom-button {
  background: linear-gradient(120deg, #1a73e8 0%, #4285f4 100%);
  border: none;
  height: 50px;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
}

.custom-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
}

.delete-button {
  background: linear-gradient(120deg, #ff4b4b 0%, #ff6b6b 100%);
  border: none;
  height: 50px;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 75, 75, 0.2);
}

.delete-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 75, 75, 0.3);
}
</style>